<template>
  <body style="padding-top: 100px">
  <div>
    <h1>欢迎来到萌趣商城</h1>
    <div class="grid-content" style="margin-top:50px;margin-bottom: 10px">
      <img src="../../public/logo.png" height="92.53" width="100"/>
    </div>
    <el-card style="width: 600px;height: 300px;
    background-color: rgba(255,255,255,0.3);margin: 0 auto">
      <el-form label-width="60px" style="width: 400px;margin: 50px auto;">
        <el-form-item label="用户名">
          <el-input type="text" v-model="user.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" @keydown.native.enter="login()" v-model="user.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="user.rem">记住用户名和密码</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button style="position: relative;left: -30px;border: 1px solid slategrey;background-color: #2c3e50" type="primary"@click="login()">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <br>
    <p><a href="/sys-admin/Reg">还未注册萌趣账户？点击此处跳转注册页面</a> </p>
  </div>
  </body>
</template>

<style>
body{
  background-image: url("../../public/bg.jpg");
  background-size: cover;/*把背景图片设置为封面*/
  background-repeat: no-repeat;
  text-align: center;
}

h1{
  font-size: 72px;
  color: hotpink;
  margin-bottom: 0;
}
img{width: 100px}
h2{
  font-size: 32px;
  color: #0096dc;
  margin-bottom: 0;
}

</style>

<script>
export default {
  data: function () {
    return {
      user:{username:"",password:"",rem:false}
    }
  },
  methods:{
    login(){
      axios.post("/login",user).then(function (response){
        if(response.data==1){
          location.href="/admin.html";
        }else  if(response.data==2){
          v.$message.error("密码错误");
        }else {
          v.$message.error("用户不存在")
        }
      })
    }
  },
  created:function(){
    let arr=document.cookie.split(";");
    let count=0;
    for(let cookieStr of arr){
      let cookieArr=cookieStr.split("=");
      let key=cookieArr[0].trim();
      let value=cookieArr[1];
      if(key=='username'){
        //如果在Vue对象初始化过程中访问对象时不能使用v 需要使用this
        // 如果此处发出异步请求后访问Vue对象 不能使用this必须使用V
        this.user.username=value;
        count++;
      }else if(key=='password'){
        this.user.password=value;
        count++;
      }
    }
    this.user.rem=count==2;
  }
}
</script>